<template>
	<div class="sc-statistic">
		<div class="sc-statistic-title">
			{{ title }}
			<el-tooltip v-if="tips" effect="light">
				<template #content>
					<div style="width: 200px;line-height: 2;">
						{{ tips }}
					</div>
				</template>
				<i class="el-icon-question sc-statistic-tips"></i>
			</el-tooltip>
		</div>
        <el-row :gutter="24">
            <el-col :span="8">
                <div class="sc-statistic-content">
                    <span class="sc-statistic-content-value">{{value1 || 0}}</span>
                </div>
				<div class="sc-statistic-content">
					<span class="sc-statistic-content-prefix">{{title1}}</span>
				</div>
            </el-col>
            <el-col :span="8">
                <div class="sc-statistic-content">
                    <span class="sc-statistic-content-value">{{value2 || 0}}</span>
                </div>
				<div class="sc-statistic-content">
					<span class="sc-statistic-content-prefix">{{title2}}</span>
				</div>
            </el-col>
            <el-col :span="8">
                <div class="sc-statistic-content">
                    <span class="sc-statistic-content-value">{{value3 || 0}}</span>
                </div>
				<div class="sc-statistic-content">
				 	<span class="sc-statistic-content-prefix">{{title3}}</span>
				</div> 
            </el-col>
        </el-row>   
	</div>
</template>

<script>
	export default {
		props: {
			title: { type: String, required: true, default: "" },
            tips: { type: String, default: "" },
			value1: { type: String, default: "" },
			title1: { type: String, default: "" },
			value2: { type: String, default: "" },
			title2: { type: String, default: "" },
            value3: { type: String, default: "" },
			title3: { type: String, default: "" },
		},
		data() {
			return {

			}
		},
		computed: {
			cmtValue(){
				return this.groupSeparator ? this.$TOOL.groupSeparator(this.value) : this.value
			}
		}
	}
</script>

<style scoped>
	.sc-statistic-title {font-size: 12px;color: #999;margin-bottom: 30px;}
	.sc-statistic-tips {margin-left: 5px;}
	.sc-statistic-content {font-size: 12px;color: #333; display: flex;justify-content: center; align-items: center;}
	.sc-statistic-content-value {font-weight: bold;}
	.sc-statistic-content-prefix {margin-right: 5px;}
	.sc-statistic-content-suffix {margin-left: 5px;font-size: 12px;}
	.sc-statistic-description {margin-top: 10px;color: #999;}

	[data-theme='dark'] .sc-statistic-content {color: #d0d0d0;}
</style>
